<template>
  <transition name="bounce" mode="out-in">
    <section class="meet-detail">
      <div class="detail-head">
        <router-link :to="{path: '/meet'}" class="mui-action-back mui-pull-left mh-back">
          <img src="../../assets/images/ico/ico_back.png" alt="返回">
        </router-link>
        <a href="javascript:" class="ic-more mui-pull-right">
          <img src="../../assets/images/ico/ico_more_white.png" alt="分享/举报/黑名单">
        </a>
      </div>
      <div class="avatar">
        <div class="close" @click='goBack'></div>
        <div class="avatar-pic-inner">
          <div class="avatar-pic">
            <img :src="info.portrait">
            <div class="ic-member"></div>
          </div>
        </div>

        <div class="match-maker">
          <div class="match-avatar">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2159656631,1684778981&fm=26&gp=0.jpg" alt="红娘">
            <span>ta的红娘</span>
          </div>
        </div>
      </div>

      <div class="main-info mui-text-center">
        <p class="flex-center">
          <span class="user-name">{{info.nickname}}</span>
          <span class="label-identify" v-if='info.is_shiming==1'>实名</span>
          <span class="label-member" v-if='info.user_rank==1'>高级会员</span>
        </p>
        <p class="sub-info">{{info.age}}岁 | {{info.height}} | {{info.province}} | 匹配度{{info.pipei || 0}}%</p>
        <!-- <p class="active-num">上月参加活动数 <span>0</span> </p> -->
        <p class="active-num">交友中</p>
      </div>

      <section class="detail-inner">
        <div class="mh-para">
          <h4>ta的照片</h4>
          <div class="mh-para-cont">
            <div class="img-wrapper">
              <div class="img-box" v-for="(item, index) in dynamicPic">
                <img :src="item.image" :key="index" alt="照片">
              </div>
            </div>
          </div>
        </div>

        <div class="mh-para">
          <h4>ta的才艺</h4>
          <div class="mh-para-cont">
            <div class="talent-wrapper flex">
              <div class="talent-list">
                <swiper :options="swiperOption" ref="talentSwiper">
                  <!-- slides -->
                  <swiper-slide v-for="item in talents" :key="item.id">
                    <img :src="item.imgSrc" alt="">
                  </swiper-slide>
                </swiper>
              </div>
              <div class="btn-more" @click="moreTalents">
                <img src="../../assets/images/ico/ico_more_cir.png" alt="更多才艺">
                <span>更多</span>
              </div>
            </div>
          </div>
        </div>

        <div class="mh-para">
          <h4>个人介绍</h4>
          <div class="mh-para-cont">
            <p class="intro">{{info.introduce || "未填写个人介绍"}}</p>
          </div>
        </div>

        <div class="mh-para">
          <h4>实名认证</h4>
          <div class="mh-para-cont">
            <div class="identify-rows">
              <div class="identify-item">
                <div :class='info.is_shiming==1 ? "img-box check" : "img-box"'>
                  <img src="../../assets/images/ico/ico_truename.png" alt="实名认证">
                </div>
                <span>实名认证</span>
              </div>
              <div class="identify-item">
                <div :class='info.is_xueli==1 ? "img-box check" : "img-box"'>
                  <img src="../../assets/images/ico/ico_edu.png" alt="学历认证">
                </div>
                <span>学历认证</span>
              </div>
<!--               <div class="identify-item">
                <div :class='info.is_phone==1 ? "img-box check" : "img-box"'>
                  <img src="../../assets/images/ico/ico_phone.png" alt="手机认证">
                </div>
                <span>手机认证</span>
              </div> -->
              <div class="identify-item">
                <div :class='info.is_caifu==1 ? "img-box check" : "img-box"'>
                  <img src="../../assets/images/ico/ico_zhima.png" alt="财富认证">
                </div>
                <span>财富认证</span>
              </div>
              <div class="identify-item">
                <div :class='info.is_car==1 ? "img-box check" : "img-box"'>
                  <img src="../../assets/images/ico/ico_car.png" alt="车辆认证">
                </div>
                <span>车辆认证</span>
              </div>
            </div>
          </div>
        </div>

        <div class="mh-para border">
          <h4>择偶意向
            <a class="mui-pull-right link-pink" href="javascript:">邀ta补全资料  > </a>
          </h4>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">年龄：</span>
                <span :class="{active: intentionInfo.intention_age_start}"
                      v-text="!intentionInfo.intention_age_start ? '未填写' : intentionInfo.intention_age_start+'-'+intentionInfo.intention_age_end">00-00</span>
              </li>
              <li class="flex intention">
                <span class="label">身高：</span>
                <span :class="{active: intentionInfo.intention_height_start}"
                      v-text="!intentionInfo.intention_height_start ? '未填写' : intentionInfo.intention_height_start+'-'+intentionInfo.intention_height_end">--cm</span>
              </li>
              <li class="flex intention">
                <span class="label">体型：</span>
                <span :class="{active: intentionInfo.intention_shape}"
                      v-text="!intentionInfo.intention_shape ? '未填写' : intentionInfo.intention_shape">--</span>
              </li>
              <li class="flex intention">
                <span class="label">学历：</span>
                <span :class="{active: intentionInfo.intention_education}"
                      v-text="!intentionInfo.intention_education ? '未填写' : intentionInfo.intention_education">--</span>
              </li>
              <li class="flex intention">
                <span class="label">月收入：</span>
                <span :class="{active: intentionInfo.intention_income}"
                      v-text="!intentionInfo.intention_income ? '未填写' : intentionInfo.intention_income">--</span>
              </li>
              <li class="flex intention">
                <span class="label">居住地：</span>
                <span :class="{active: intentionInfo.intention_residence}"
                      v-text="!intentionInfo.intention_residence ? '未填写' : intentionInfo.intention_residence">--</span>
              </li>
              <li class="flex intention">
                <span class="label">婚姻状况：</span>
                <span :class="{active: intentionInfo.intention_marriage}"
                      v-text="!intentionInfo.intention_marriage ? '未填写' : intentionInfo.intention_marriage">--</span>
              </li>
              <li class="flex intention">
                <span class="label">购房情况：</span>
                <span :class="{active: intentionInfo.intention_house}"
                      v-text="intentionInfo.intention_house == '' ? '未填写' : intentionInfo.intention_house">--</span>
              </li>
              <li class="flex intention">
                <span class="label">有无子女：</span>
                <span :class="{active: intentionInfo.intention_children}"
                      v-text="!intentionInfo.intention_children ? '未填写' : intentionInfo.intention_children">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para border">
          <h4>恋爱类型
            <a class="mui-pull-right link-pink" href="javascript:">邀ta补全资料  > </a>
          </h4>
          <div class="mh-para-cont">
            <p class="intro">暂无恋爱类型</p>
          </div>
        </div>

        <div class="mh-para border">
          <h4>基本资料
            <a class="mui-pull-right link-pink" href="javascript:">邀ta补全资料  > </a>
          </h4>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">ID：</span>
                <span :class="{active: baseInfo.id}"
                      v-text="!baseInfo.id ? '未填写' : baseInfo.id">--</span>
              </li>
              <li class="flex intention">
                <span class="label">昵称：</span>
                <span :class="{active: baseInfo.nickname}"
                      v-text="!baseInfo.nickname ? '未填写' : baseInfo.nickname">--</span>
              </li>
              <li class="flex intention">
                <span class="label">性别：</span>
                <span v-if='baseInfo.gender==0' class="active">男</span>
                <span v-else class="active">女</span>
              </li>
              <li class="flex intention">
                <span class="label">生日：</span>
                <span :class="{active: baseInfo.birthday}"
                      v-text="!baseInfo.birthday ? '未填写' : baseInfo.birthday">--</span>
              </li>
              <li class="flex intention">
                <span class="label">属相：</span>
                <span :class="{active: baseInfo.zodiac}"
                      v-text="!baseInfo.zodiac ? '未填写' : baseInfo.zodiac">--</span>
              </li>
              <li class="flex intention">
                <span class="label">星座：</span>
                <span :class="{active: baseInfo.constellation}"
                      v-text="!baseInfo.constellation ? '未填写' : baseInfo.constellation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">身高：</span>
                <span :class="{active: baseInfo.height}"
                      v-text="!baseInfo.height ? '未填写' : baseInfo.height">--</span>
              </li>
              <li class="flex intention">
                <span class="label">学历：</span>
                <span :class="{active: baseInfo.education}"
                      v-text="!baseInfo.education ? '未填写' : baseInfo.education">--</span>
              </li>
              <li class="flex intention">
                <span class="label">职业：</span>
                <span :class="{active: baseInfo.occupation}"
                      v-text="!baseInfo.occupation ? '未填写' : baseInfo.occupation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">婚姻状况：</span>
                <span :class="{active: baseInfo.marriage}"
                      v-text="!baseInfo.marriage ? '未填写' : baseInfo.marriage">--</span>
              </li>
              <li class="flex intention">
                <span class="label">子女情况：</span>
                <span :class="{active: baseInfo.children}"
                      v-text="!baseInfo.children ? '未填写' : baseInfo.children">--</span>
              </li>
              <li class="flex intention">
                <span class="label">所在地区：</span>
                <span :class="{active: baseInfo.province}"
                      v-text="!baseInfo.province ? '未填写' : baseInfo.province+baseInfo.city">--</span>
              </li>
              <li class="flex intention">
                <span class="label">家乡：</span>
                <span :class="{active: baseInfo.hometown}"
                      v-text="!baseInfo.hometown ? '未填写' : baseInfo.hometown">--</span>
              </li>
              <li class="flex intention">
                <span class="label">月收入：</span>
                <span :class="{active: baseInfo.income}"
                      v-text="!baseInfo.income ? '未填写' : baseInfo.income">--</span>
              </li>
              <li class="flex intention">
                <span class="label">购房情况：</span>
                <span :class="{active: baseInfo.house}"
                      v-text="!baseInfo.house ? '未填写' : baseInfo.house">--</span>
              </li>
<!--               <li class="flex intention">
                <span class="label">居住状态：</span>
                <span :class="{active: baseInfo.liveStatus}"
                      v-text="!baseInfo.liveStatus ? '未填写' : baseInfo.liveStatus">--</span>
              </li> -->
              <li class="flex intention">
                <span class="label">购车情况：</span>
                <span :class="{active: baseInfo.car}"
                      v-text="!baseInfo.car ? '未填写' : baseInfo.car">--</span>
              </li>
            </ul>

            <div class="hide-part">
              <div class="cover-layer mui-text-center">
                <div class="mui-content-padded">
                  <p>已隐藏微信号</p>
                  <p>成为会员后方可有权查看</p>
                  <button type="button" class="mui-btn mui-btn-block mh-btn">成为会员</button>
                </div>
              </div>
              <ul class="info-list">
                <li class="flex intention">
                  <span class="label">微信号：</span>
                  <span :class="{active: baseInfo.weixin}"
                        v-text="!baseInfo.weixin ? '未填写' : baseInfo.weixin">*********</span>
                </li>
                <li class="flex intention">
                  <span class="label">手机号码：</span>
                  <span :class="{active: baseInfo.phone}"
                        v-text="!baseInfo.phone ? '未填写' : baseInfo.phone">*********</span>
                </li>
                <li class="flex intention">
                  <span class="label">电话号码：</span>
                  <span :class="{active: baseInfo.telephone}"
                        v-text="!baseInfo.telephone ? '未填写' : baseInfo.telephone">*********</span>
                </li>
                <li class="flex intention">
                  <span class="label">QQ：</span>
                  <span :class="{active: baseInfo.qq}"
                        v-text="!baseInfo.qq ? '未填写' : baseInfo.qq">*********</span>
                </li>
                <li class="flex intention">
                  <span class="label">其他方式：</span>
                  <span :class="{active: baseInfo.other_model}"
                        v-text="!baseInfo.other_model ? '未填写' : baseInfo.other_model">*********</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="mh-para border">
          <h4>小档案
            <a class="mui-pull-right link-pink" href="javascript:">邀ta补全资料  > </a>
          </h4>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">家乡：</span>
                <span :class="{active: fileInfo.hometown}"
                      v-text="!fileInfo.hometown ? '未填写' : fileInfo.hometown">--</span>
              </li>
              <li class="flex intention">
                <span class="label">户口：</span>
                <span :class="{active: fileInfo.registered_residence}"
                      v-text="!fileInfo.registered_residence ? '未填写' : fileInfo.registered_residence">--</span>
              </li>
              <li class="flex intention">
                <span class="label">民族：</span>
                <span :class="{active: fileInfo.nation}"
                      v-text="!fileInfo.nation ? '未填写' : fileInfo.nation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">属相：</span>
                <span :class="{active: fileInfo.zodiac}"
                      v-text="!fileInfo.zodiac ? '未填写' : fileInfo.zodiac">--</span>
              </li>
              <li class="flex intention">
                <span class="label">星座：</span>
                <span :class="{active: fileInfo.constellation}"
                      v-text="!fileInfo.constellation ? '未填写' : fileInfo.constellation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">血型：</span>
                <span :class="{active: fileInfo.blood_type}"
                      v-text="!fileInfo.blood_type ? '未填写' : fileInfo.blood_type">--</span>
              </li>
              <li class="flex intention">
                <span class="label">体型：</span>
                <span :class="{active: fileInfo.shape}"
                      v-text="!fileInfo.shape ? '未填写' : fileInfo.shape">--</span>
              </li>
              <li class="flex intention">
                <span class="label">体重：</span>
                <span :class="{active: fileInfo.weight}"
                      v-text="!fileInfo.weight ? '未填写' : fileInfo.weight">--</span>
              </li>
              <li class="flex intention">
                <span class="label">相貌自评：</span>
                <span :class="{active: fileInfo.looks}"
                      v-text="!fileInfo.looks ? '未填写' : fileInfo.looks">--</span>
              </li>
              <li class="flex intention">
                <span class="label">宗教信仰：</span>
                <span :class="{active: fileInfo.religion}"
                      v-text="!fileInfo.religion ? '未填写' : fileInfo.religion">--</span>
              </li>
              <li class="flex intention">
                <span class="label">是否喝酒：</span>
                <span :class="{active: fileInfo.is_drink}"
                      v-text="!fileInfo.is_drink ? '未填写' : fileInfo.is_drink">--</span>
              </li>
              <li class="flex intention">
                <span class="label">是否抽烟：</span>
                <span :class="{active: fileInfo.is_smoking}"
                      v-text="!fileInfo.is_smoking ? '未填写' : fileInfo.is_smoking">--</span>
              </li>
              <li class="flex intention">
                <span class="label">生活作息：</span>
                <span :class="{active: fileInfo.lifestyle}"
                      v-text="!fileInfo.lifestyle ? '未填写' : fileInfo.lifestyle">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para border">
          <h4>教育及工作
            <a class="mui-pull-right link-pink" href="javascript:">邀ta补全资料  > </a>
          </h4>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">毕业院校：</span>
                <span :class="{active: educateWork.graduation}"
                      v-text="!educateWork.graduation ? '未填写' : educateWork.graduation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">所属专业：</span>
                <span :class="{active: educateWork.major}"
                      v-text="!educateWork.major ? '未填写' : educateWork.major">--</span>
              </li>
              <li class="flex intention">
                <span class="label">职业职务：</span>
                <span :class="{active: educateWork.duties}"
                      v-text="!educateWork.duties ? '未填写' : educateWork.duties">--</span>
              </li>
              <li class="flex intention">
                <span class="label">公司性质：</span>
                <span :class="{active: educateWork.company_nature}"
                      v-text="!educateWork.company_nature ? '未填写' : educateWork.company_nature">--</span>
              </li>
              <li class="flex intention">
                <span class="label">公司行业：</span>
                <span :class="{active: educateWork.company_industry}"
                      v-text="!educateWork.company_industry ? '未填写' : educateWork.company_industry">--</span>
              </li>
              <li class="flex intention">
                <span class="label">工作状态：</span>
                <span :class="{active: educateWork.workStatus}"
                      v-text="!educateWork.workStatus ? '未填写' : educateWork.workStatus">--</span>
              </li>
              <li class="flex intention">
                <span class="label">掌握语言：</span>
                <span :class="{active: educateWork.language}"
                      v-text="!educateWork.language ? '未填写' : educateWork.language">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para border">
          <h4>家庭状况
            <a class="mui-pull-right link-pink" href="javascript:">邀ta补全资料  > </a>
          </h4>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">家中排行：</span>
                <span :class="{active: family.ranking}"
                      v-text="!family.ranking ? '未填写' : family.ranking">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母情况：</span>
                <span :class="{active: family.parents}"
                      v-text="!family.parents ? '未填写' : family.parents">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父亲工作：</span>
                <span :class="{active: family.father_work}"
                      v-text="!family.father_work ? '未填写' : family.father_work">--</span>
              </li>
              <li class="flex intention">
                <span class="label">母亲工作：</span>
                <span :class="{active: family.mother_work}"
                      v-text="!family.mother_work ? '未填写' : family.mother_work">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母经济：</span>
                <span :class="{active: family.parent_economics}"
                      v-text="!family.parent_economics ? '未填写' : family.parent_economics">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母医保：</span>
                <span :class="{active: family.parent_insurance}"
                      v-text="!family.parent_insurance ? '未填写' : family.parent_insurance">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母联系方式：</span>
                <span :class="{active: family.parent_contact}"
                      v-text="!family.parent_contact ? '未填写' : family.parent_contact">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para border">
          <h4>爱情规划
            <a class="mui-pull-right link-pink" href="javascript:">邀ta补全资料  > </a>
          </h4>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">何时结婚：</span>
                <span :class="{active: lovePlan.when_marry}"
                      v-text="!lovePlan.when_marry ? '未填写' : lovePlan.when_marry">--</span>
              </li>
              <li class="flex intention">
                <span class="label">愿与对方父母同住：</span>
                <span :class="{active: lovePlan.live_together}"
                      v-text="!lovePlan.live_together ? '未填写' : lovePlan.live_together">--</span>
              </li>
              <li class="flex intention">
                <span class="label">是否想要小孩：</span>
                <span :class="{active: lovePlan.want_kids}"
                      v-text="!lovePlan.want_kids ? '未填写' : lovePlan.want_kids">--</span>
              </li>
              <li class="flex intention">
                <span class="label">偏爱的约会方式：</span>
                <span :class="{active: lovePlan.tryst_model}"
                      v-text="!lovePlan.tryst_model ? '未填写' : lovePlan.tryst_model">--</span>
              </li>
              <li class="flex intention">
                <span class="label">希望对方看重：</span>
                <span :class="{active: lovePlan.hope_fancy}"
                      v-text="!lovePlan.hope_fancy ? '未填写' : lovePlan.hope_fancy">--</span>
              </li>
              <li class="flex intention">
                <span class="label">期待的婚礼形式：</span>
                <span :class="{active: lovePlan.wedding_form}"
                      v-text="!lovePlan.wedding_form ? '未填写' : lovePlan.wedding_form">--</span>
              </li>
              <li class="flex intention">
                <span class="label">厨艺状况：</span>
                <span :class="{active: lovePlan.cooking}"
                      v-text="!lovePlan.cooking ? '未填写' : lovePlan.cooking">--</span>
              </li>
              <li class="flex intention">
                <span class="label">家务分工：</span>
                <span :class="{active: lovePlan.housework}"
                      v-text="!lovePlan.housework ? '未填写' : lovePlan.housework">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para border">
          <h4>礼物
            <a class="mui-pull-right link-pink" href="javascript:">赠送礼物  > </a>
          </h4>
          <div class="mh-para-cont">
          </div>
        </div>

        <div class="mh-para border">
          <h4>兴趣爱好</h4>
          <div class="mh-para-cont">
            <div class="mh-pd-lr">
              <!-- <span class="hobby" v-for="item in hobby" v-text="item">爱好</span> -->
              <span class="hobby">{{info.interest || "未填写"}}</span>
            </div>
          </div>
        </div>

        <div class="mh-para border">
          <h4>网友评级</h4>
          <div class="mh-para-cont">
            <p class="mh-pd-lr">{{info.grade}}</p>
          </div>
        </div>

        <div class="mh-para border">
          <h4>备注</h4>
          <div class="mh-para-cont">
            <p class="mh-pd-lr flex-bt">暂无备注
              <a href="javascript:" class="mui-pull-right mui-btn-link">添加备注</a>
            </p>
          </div>
        </div>

        <div class="mh-para border mh-mg-bt">
          <h4>猜你喜欢</h4>
          <div class="mh-para-cont">
            <div class="mh-pd flex">
              <div class="guess-like mui-text-center" v-for="item in guessLike" :key="item.id">
                <div class="avatar">
                  <img :src="item.portrait" :alt="item.nickname">
                </div>
                <p v-text="item.nickname">用户名</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="detail-footer" v-if='!is_hong'>
        <nav class="flex">
          <a href="javascript:" @click='clickUser(1)'>
            <img src="../../assets/images/ico/ic_d_chat.png" alt="聊天">
            <span>聊天</span>
          </a>
          <a href="javascript:" @click='clickUser(2)'>
            <img src="../../assets/images/ico/ic_d_gift.png" alt="送礼物">
            <span>送礼物</span>
          </a>
          <a href="javascript:" @click='clickUser(3)'>
            <img src="../../assets/images/ico/ic_d_like.png" alt="相亲">
            <span>相亲</span>
          </a>
          <a href="javascript:" @click='clickUser(4)'>
            <img src="../../assets/images/ico/ic_d_money.png" alt="打赏">
            <span>打赏</span>
          </a>
          <a href="javascript:" @click='clickUser(5)'>
            <img src="../../assets/images/ico/ic_d_watch.png" alt="订阅">
            <span>订阅</span>
          </a>
        </nav>
      </section>
    </section>
  </transition>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import {MH_API} from "@/api/api";
  export default {
    name: "detail",
    data () {
      return {
        swiperOption: {
          loop: true,
          slidesPerView: 2,
          spaceBetween: 10,
          centeredSlides: true,
        },
        talents: [
          // {
          //   id: '1',
          //   imgSrc: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713526531,3850193221&fm=26&gp=0.jpg'
          // },
          // {
          //   id: '2',
          //   imgSrc: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3029800330,458735988&fm=15&gp=0.jpg'
          // }
        ],
        dynamicPic: [
          // {
          //   id: '3',
          //   imgSrc: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2349628112,3339301703&fm=15&gp=0.jpg'
          // },
          // {
          //   id: '4',
          //   imgSrc: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3129191916,673867751&fm=15&gp=0.jpg'
          // }
        ],
        intentionInfo: {
          age: '20-27',
          height: '170cm',
          bodyType: '偏瘦',
          edu: '',
          income: '',
          address: '',
          marriage: '',
          house: '',
          child: ''
        },
        baseInfo: {
          id: '54815223333',
          nickname: 'Darvin',
          sex: '男',
          birthday: '',
          zodiac: '',
          height: '',
          constellation: '',
          edu: '',
          career: '',
          marriage: '',
          child: '',
          city: '',
          hometown: '',
          income: '',
          house: '',
          liveStatus: '',
          car: '',
          wechat: '',
          phone: '',
          tel: '',
          qq: '',
          other: ''
        },
        fileInfo: {
          hometown: '北京',
          account: '东城区',
          nationality: '汉族',
          zodiac: '',
          constellation: '',
          blood: '',
          bodyType: '',
          weight: '',
          selfEvaluation: '',
          faith: '',
          drink: '',
          smoke: '',
          lifestyle: ''
        },
        educateWork: {
          graduatedSchool: '',
          profession: '',
          position: '',
          comType: '',
          comIndustry: '',
          workStatus: '',
          lang: ''
        },
        family: {
          ranking: '老大',
          parents: '公务员',
          father: '',
          mother: '',
          parentsEconomic: '',
          parentsMedical: '',
          parentsContact: ''
        },
        lovePlan: {
          marryTime: '',
          willingLiveParents: '',
          wilingChild: '',
          preferDating: '',
          hopeValue: '',
          expectWedding: '',
          cooking: '',
          houseWork: ''
        },
        hobby: ['汽车','旅游','阅读','跳伞'],
        guessLike: [
          {
            id: '1',
            name: '张兔兔',
            avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1773633298,2629220769&fm=26&gp=0.jpg'
          },
          {
            id: '2',
            name: '王兔兔',
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2000417879,3233091669&fm=15&gp=0.jpg'
          },
          {
            id: '3',
            name: '李兔兔',
            avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1738636455,3694468788&fm=15&gp=0.jpg'
          },
          {
            id: '4',
            name: '张兔兔',
            avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1773633298,2629220769&fm=26&gp=0.jpg'
          }

        ],
        //基础信息
        info: {},
        id: null,
        is_hong: false
      }
    },
    computed: {
      swiper() {
        return this.$refs.talentSwiper.swiper
      }
    },
    mounted () {
      // let userId = this.$route.query.id;
      // console.log(userId)
      console.log('this is current swiper instance object', this.swiper);
      this.swiper.slideTo(3, 1000, false)
    },
    methods: {
      clickUser(type){
        let self = this;
        let name = self.info.nickname;
        let id = self.id;
        //聊天
        if(type==1){
          this.$router.push({
            path: '/chat',
            query: {
              name: name,
              id: id
            }
          })
        }
        else if(type==2){
          MH_API.putGifts({
            uid: self.id,
            id: 1,
            num: 1
          }).then(res => {
            if (res.status === 200) {
              mui.toast("赠送成功")
            }
            else{
              mui.toast(res.msg)
            }
          })
        }
        else if(type==3){

        }
        else if(type==4){
          MH_API.clickReward({
            to_user: self.id
          }).then(res => {
            if (res.status === 200) {
              mui.toast("打赏成功")
            }
            else if(res.status === 401){
              mui.toast(res.msg);
              self.$router.push({
                path: '/profile/rewardSetting'
              })
            }
            else{
              mui.toast(res.msg)
            }
          })
        }
        else if(type==5){
          MH_API.clickLove({
            to_user: self.id
          }).then(res => {
            if (res.status === 200) {
              mui.toast("已订阅")
            }
            else{
              mui.toast(res.msg)
            }
          })
        }
      },
      goBack:function(){
        this.$router.go(-1)
      },
      moreTalents () {
        this.$router.push({
          path: '/meet/talents',
          query: {
            id: '12445'
          }
        })
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    created(){
      console.log(this.$route.query.id)
      let id = this.$route.query.id || 1103;
      let type = this.$route.query.type;
      if(type && type==2){
        //红娘端
        this.is_hong = true
      }
      this.id = id;
      let self = this;
      let params = {
        id: id
      };
      MH_API.getUserInfo(params).then(res => {
        if (res.status === 200) {
          self.info = res.data;
          self.intentionInfo = res.data;//择偶
          self.baseInfo = res.data;//基本信息
          self.fileInfo = res.data;//小档案
          self.educateWork = res.data;//教育及工作
          self.family = res.data;
          self.lovePlan = res.data;
          self.dynamicPic = res.data.images;
        }
      })
      MH_API.getTalent({
        id: id,
        page: 1,
        limit: 10
      }).then(res => {
        if (res.status === 200) {
          self.talents = res.data;
        }
      })
      //猜你喜欢
      MH_API.getUsers({
        page: 1,
        limit: 4
      }).then(res => {
        if (res.status === 200) {
          self.guessLike = res.data;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .meet-detail {
    width: 100%;
    height: 100%;
    padding-bottom: 4.8rem;
    background: url("../../assets/images/bg/bg_detail.png") no-repeat left top;
    background-size: 100% 12.5rem;
    overflow: auto;
    .detail-inner {background: #fff;}
  }
  .detail-head {
    padding: 0;
  }
  .ic-more {
    img {
      width: 3rem;
    }
  }
  .avatar {
    position: relative;
    width: 100%;
    height: 13.5rem;
  }
  .avatar .close{ width:6rem;height:6rem;position:absolute; top:0; left:0; z-index:100;}
  .avatar-pic-inner {
    @include cl;
    width: 7rem;
    height: 7rem;
    border-radius: 100%;
    /*overflow: hidden;*/
    border: 3px solid rgba(255, 255, 255, .8);
    background-color: #999999;
    bottom: 0;
  }
  .avatar-pic {
    position: relative;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
    .ic-member {
      position: absolute;
      width: 3rem;
      height: 3rem;
      background: url("../../assets/images/ico/ico_member.png") no-repeat center;
      background-size: 100% 100%;
      right: 0;
      top: -2rem;
      z-index: 4;
    }
  }
  .match-maker {
    @include ct;
    right: 0;
  }
  .match-avatar {
    float: right;
    display: flex;
    align-items: center;
    width: 9.6rem;
    height: 3.6rem;
    padding: .3rem;
    font-size: 1.2rem;
    color: #fff;
    background: #f26c60;
    border-top: .1rem solid #fff;
    border-bottom: .1rem solid #fff;
    border-top-left-radius: 1.75rem;
    border-bottom-left-radius: 1.75rem;
    img {
      width: 3rem;
      height: 3rem;
      margin-right: .4rem;
      border-radius: 100%;
    }
  }

  .main-info {
    margin: 1.2rem 0;
    p {margin-bottom: .7rem}
    .sub-info,.active-num {
      font-size: 1.2rem;
      color: #666;
    }
    .active-num span {
      color: #e685aa;
    }
  }
  .user-name {
    font-size: 1.5rem;
    color: #333;
  }
  .label-identify {
    margin: 0 .2rem;
    padding: 0 .4rem;
    background: #5da645;
    color: #fff;
    font-size: .9rem;
  }
  .label-member {
    padding: .1rem .4rem;
    background: #ff9a11;
    color: #fff;
    font-size: .9rem;
  }

  .img-wrapper {
    display: flex;
    justify-content: flex-start;
  }
  .img-box {
    width: 9.3rem;
    height: 9.3rem;
    margin-right: .5rem;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .mh-para {
    background: #fff;
    h4 {
      padding: 1.5rem;
    }
    .img-wrapper {
      padding: 0 1.5rem;
    }
    &.border {
      margin-top: 1.5rem;
      border-top: .05rem solid #eee;
    }
  }
  .talent-wrapper {
    width: 100%;
    height: 10rem;
    padding-right: 1.5rem;
    .talent-list {
      height: 10rem;
      overflow: hidden;
      flex: 1;
    }
    .btn-more {
      display: flex;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 4.75rem;
      float: right;
      font-size: 1.2rem;
      color: #999;
      background: #fff;
      img {
        width: 2rem;
      }
    }
  }
  .intro {
    font-size: 1.2rem;
    color: #999;
    padding: 0 1.5rem;
  }
  .identify-rows {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 1.5rem;
    overflow: hidden;
  }
  .identify-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #666;

    .img-box {
      position: relative;
      width: 4.4rem;
      height: 4.4rem;
      margin-bottom: .5rem;
      background: #eee;
      border-radius: 100%;
      img {
        width: auto;
        height: 40%;
        @include center;
      }
    }
    .img-box.check{background: linear-gradient(90deg, #dd65a1 0%, #fa7b75 100%);}
  }
  .link-pink {
    font-size: 1.2rem;
    color: #eb537f;
  }

  .info-list {
    padding: 0 1.5rem;
    .intention {
      padding: .6rem 0;
    }
    span {
      width: 50%;
      color: #999;
      font-size: 1.2rem;
      &.active {color: #666;}
    }
  }
  .hide-part {
    position: relative;
    .cover-layer {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: url("../../assets/images/bg/bg_cover.png") no-repeat left top;
      background-size: 100% 100%;
      z-index: 9;
      p {
        font-size: 1.2rem;
        color: #333;
        margin-top: 1.2rem;
      }
      button {margin-top: 1.2rem}
    }
  }

  .hobby {
    padding: .3rem .9rem;
    margin-right: 1rem;
    color: #fff;
    font-size: 1.2rem;
    border-radius: 1.2rem;
    background-image: linear-gradient(180deg, #dd65a1 20%,#fa625a 100%);
  }
  .guess-like {
    position: relative;
    width: 25%;
    .avatar {
      width: 4.5rem;
      height: 4.5rem;
      margin: 0 auto .5rem;
      border-radius: 100%;
      background: #3d5667;
      img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
  }
  .detail-footer {
    width: 100%;
    position: fixed;
    padding: .5rem 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #dd65a1 30%,#fa625a 100%);
    z-index: 999;
    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 25%;
      color: #fff;
      font-size: 1.2rem;
    }
    img {
      height: 1.7rem;
      margin-bottom: .2rem;
    }
  }
  .mh-back {
    width: 3rem;
    height: 3rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 1.75rem;
    }
  }
</style>
